<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改用户</title>
    <script src="../static/js/axios.js"></script>
    <link rel="shortcut icon" href="../static/imgs/cms.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/PersonalCenter.css">
    <script src="../static/js/jQuery.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #373636;color: white;font-weight: bold">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">提示！！!</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--导航栏--->
<nav class="navbar navbar-default nav_bottom">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" style="font-weight: 900;font-size: 40px"><span style="color: #fc5531;">c</span>sdn</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav nav-title">
                <li><a href="#" style="font-weight: bold;color: #999999;font-size: 25px">修改用户</a></li>
            </ul>
            <form class="navbar-form navbar-left">
            </form>
            <ul class="nav navbar-nav navbar-right">
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--竖导航栏、个人信息栏、编辑信息栏-->
<div class="container">
    <div class="row">
        <div class="col-md-2" >
            <div class="row">
                <div class="col-md-11" style="background-color: white;height: 60px;position: fixed;width:180px">
                    <ul class="nav nav-pills nav-stacked" style="width: 150px;padding-top: 10px;padding-left: 2px">
                        <li class="active nav-personal-info"><a href="#" >个人资料</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--个人资料界面-->
        <div class="col-md-10 personal-info" >
            <div class="row" style="background-color: white">
                <div class=" col-md-6 personal-message-top" style="height: 150px">
                    <div class="headpicture-box">
                        <img src=""  alt="" class="headpicture">
                    </div>
                    <div class="top-info-box">
                        <div class="top-nickname">

                        </div>
                        <div class="top-info">
                            <div class="top-fans-number top-number">
                                <span class="top-info-tail top-fans">-</span>粉丝
                            </div>
                            <div class="top-following-number top-number">
                                <span class="top-info-tail top-following">-</span>关注
                            </div>
                            <div class="top-praise-number top-number">
                                <span class="top-info-tail top-support">-</span>获赞
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="row" style="background-color: white">
                <div class="col-md-12 personal-message-bottom" style="height:570px;">
                    <div style="border-bottom: 1px solid rgb(221, 221, 221)">
                        <h4 style="font-weight: bold">基本信息</h4>
                    </div>
                    <div class="base-msg">
                        <!--展示个人基本信息-->
                        <div class="base-msg-out" style="" >
                            <div class="base-msg-one">
                                <div class="base-msg-left">
                                    <span>昵</span>
                                    <span>称</span>
                                </div>
                                <div class="base-msg-right" id="msg-nickname"></div>
                            </div>
                            <div class="base-msg-one">
                                <div class="base-msg-left">
                                    <span>用</span>
                                    <span>户</span>
                                    <span>ID</span>
                                </div>
                                <div class="base-msg-right" id="msg-username"></div>
                            </div>
                            <div class="base-msg-one">
                                <div class="base-msg-left">
                                    <span>邮</span>
                                    <span>箱</span>
                                </div>
                                <div class="base-msg-right" id="msg-mailbox"></div>
                            </div>
                            <div class="base-msg-one">
                                <div class="base-msg-left">
                                    <span>性</span>
                                    <span>别</span>
                                </div>
                                <div class="base-msg-right" id="msg-gender"></div>
                            </div>
                            <div class="base-msg-one">
                                <div class="base-msg-left">
                                    <span>出</span>
                                    <span>生</span>
                                    <span>日</span>
                                    <span>期</span>
                                </div>
                                <div class="base-msg-right" id="msg-borndate"></div>
                            </div>
                            <div class="base-msg-one">
                                <div class="base-msg-left">
                                    <span>所</span>
                                    <span>在</span>
                                    <span>地</span>
                                    <span>区</span>
                                </div>
                                <div class="base-msg-right" id="msg-region"></div>
                            </div>
                            <div class="base-msg-one">
                                <div class="base-msg-left">
                                    <span>个</span>
                                    <span>人</span>
                                    <span>简</span>
                                    <span>介</span>
                                </div>
                                <div class="base-msg-right" id="msg-intro">
                                </div>
                            </div>
                            <div class="editor"><span class="glyphicon glyphicon-edit btn-default" aria-hidden="true"></span><a href="#" class="editor-font">编辑</a></div>
                        </div>
                        <!--修改个人基本信息-->
                        <div class="col-md-12 editor-info">
                            <div class="editor-msg-one">
                                <div class="editor-msg-left">
                                    <span>昵</span>
                                    <span>称</span>
                                </div>
                                <div class="editor-msg-right">
                                    <input class="form-control" id="editor-info-nickname" placeholder="请输入你的昵称">
                                </div>
                            </div>
                            <div class="editor-msg-one">
                                <div class="editor-msg-left">
                                    <span>用</span>
                                    <span>户</span>
                                    <span>ID</span>
                                </div>
                                <div class="editor-msg-right">
                                    <input class="form-control" type="text" id="editor-info-id" placeholder="用户ID不可更改" disabled>
                                </div>
                            </div>
                            <div class="editor-msg-one">
                                <div class="editor-msg-left">
                                    <span>邮</span>
                                    <span>箱</span>
                                </div>
                                <div class="editor-msg-right">
                                    <input class="form-control"  type="text" id="editor-info-mailbox" placeholder="邮箱不可更改" disabled>
                                </div>
                            </div>
                            <div class="editor-msg-one">
                                <div class="editor-msg-left">
                                    <span>性</span>
                                    <span>别</span>
                                </div>
                                <div class="editor-msg-right">
                                    <label class="radio-inline" style="font-weight: bold">
                                        <input type="radio"  name="editor-gender" value="male" class="editor-info-gender-male">男
                                    </label>
                                    <label class="radio-inline" style="font-weight: bold">
                                        <input type="radio" name="editor-gender" value="female">女
                                    </label>
                                </div>
                            </div>
                            <div class="editor-msg-one">
                                <div class="editor-msg-left">
                                    <span>所</span>
                                    <span>在</span>
                                    <span>地</span>
                                    <span>区</span>
                                </div>
                                <div class="editor-msg-right">
                                    <input class="form-control" id="editor-info-region" placeholder="请输入你所在的地区">
                                </div>
                            </div>
                            <div class="editor-msg-one">
                                <div class="editor-msg-left">
                                    <span>出</span>
                                    <span>生</span>
                                    <span>日</span>
                                    <span>期</span>
                                </div>
                                <div class="editor-msg-right">
                                    <input type="date" placeholder="出生日期" id="editor-info-birthday" class="input-style">
                                </div>
                            </div>
                            <div class="editor-msg-one">
                                <div class="editor-msg-left">
                                    <span>个</span>
                                    <span>人</span>
                                    <span>简</span>
                                    <span>介</span>
                                </div>
                                <div class="editor-msg-right">
                                    <div class="form-group">
                                        <textarea class="form-control" rows="3" id="editor-info-intro" placeholder="请输入你的个人简介"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="editor-msg-one" style="justify-content: center">
                                <button class="change-info">保存修改</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>
<!--js、jquery代码-->
<script>
    let email;
    /*窗口初始化函数*/
    $(function(){
        const href=decodeURI(window.location.href);//译码
        let hrefIndex=href.split('?email=');
        email=hrefIndex[1];
        //初始化设置隐藏编辑按钮
        $(".editor").css("display","none")
        $(".editor-info").css("display","none");

        {
            let url = 'http://localhost:8080/userServlet?action=get_invite_info'
            axios({
                method: 'GET',
                url: url,
                params:{
                     invite_id:email
                },
            }).then(function (res) {
                console.log(res);
                    let data = res['data'];
                    $("#msg-nickname").html(data['data']['nickname']);
                    $('#msg-username').html(data['data']['username']);
                    $('#msg-mailbox').html(data['data']['mailbox']);
                    $(".headpicture").attr("src", data['data']['headpicture']);
                    var gender_info =data['data']['gender'];
                    if (gender_info === "male") {
                        $('#msg-gender').html("男");
                    } else {
                        $('#msg-gender').html("女");
                    }
                    $('#msg-borndate').html(data['data']['borndate']);
                    let region=data['data']['region'];
                    if (region ==="undefined") {
                        $('#msg-region').html("未知星球");
                    } else {
                        $('#msg-region').html(region);
                    }
                    let intro=data['data']['intro'];
                    if (intro === "undefined") {
                        $('#msg-intro').html("这个人很懒,啥也没说");
                    } else {
                        $('#msg-intro').html(intro);
                    }
                    $(".top-nickname").html(window.localStorage.getItem("nickname"));
                    get_user_success();
            })
        }
    })

    /*获取用户成就*/
    function get_user_success() {
        let url='http://localhost:8080/userServlet?action=get_user_success'
        axios({
            method: "GET",
            url:url,
            params: {
                email:email
            }
        }).then(function (res) {
            console.log(res);
            let data=res['data'];
            $(".top-fans").html(data['data']['fans_number']);
            $(".top-following").html(data['data']['following_number']);
            $(".top-support").html(data['data']['support_number']);
        })
    }


    //设置编辑按钮的隐藏和出现
    {
        $(".base-msg").mouseenter(function () {
            $(".editor").css("display","");
        })
        $(".base-msg").mousemove(function () {
            $(".editor").css("display","");
        })
        $(".base-msg").mouseout(function () {
            $(".editor").css("display","none");
        })
    }

    /*模态框函数*/
    function modal(content) {
        $('.modal-body').html(content);
        $("#myModal").modal("show");
    }

    /*保存修改按钮的点击事件*/
    $(".change-info").click(function () {
        let nickname_val = $('#editor-info-nickname').val();
        let patt=/^.{5,12}$/;
        if(patt.test(nickname_val)) {
            /*向后端发送修改个人信息的请求*/
            send_change_info();
            /*更新基本信息页面*/
            $("#msg-nickname").html($('#editor-info-nickname').val());
            var gender_editor_info = $('input:radio[name="editor-gender"]:checked').val();
            if (gender_editor_info === "male") {
                $('#msg-gender').html("男");
            } else {
                $('#msg-gender').html("女");
            }
            $('#msg-region').html($('#editor-info-region').val());
            $('#msg-borndate').html($('#editor-info-birthday').val());
            $('#msg-intro').html($('#editor-info-intro').val());
            $('.editor-info').hide();
            $('.base-msg-out').show()
        }else{
            modal("昵称必须由5-12位的汉字、数字、字母或下划线组成！");
        }
    })

    /*向服务器发送修改个人信息的请求*/
    function send_change_info() {
        let url = 'http://localhost:8080/userServlet?action=change_user_info'
        axios({
            method: 'GET',
            url: url,
            params:{
                nickname:$('#editor-info-nickname').val(),
                userid:$('#editor-info-id').val(),
                gender:$('input:radio[name="editor-gender"]:checked').val(),
                region:$('#editor-info-region').val(),
                borndate: $('#editor-info-birthday').val(),
                intro:$('#editor-info-intro').val()
            },
        }).then(function (response) {
            console.log(response);
            modal(response.data.message);
        })
    }

    /*当点击编辑按钮的时候，隐藏展示个人信息的页面，展示修改个人信息的页面*/
    $(".editor").click(function () {
        $(".base-msg-out").hide();
        $(".editor-info").show();
        /*初始化编辑信息界面*/
        {
            $('#editor-info-nickname').val(document.getElementById("msg-nickname").innerText);
            $('#editor-info-id').val(document.getElementById("msg-username").innerText);
            $('#editor-info-mailbox').val(document.getElementById("msg-mailbox").innerText);
            var gender_checked = document.getElementById("msg-gender").innerText;
            if (gender_checked === "男") {
                $('input:radio:first').prop('checked', true);
            } else {
                $('input:radio:last').prop('checked', true);
            }
            $('#editor-info-region').val(document.getElementById("msg-region").innerText);
            $('#editor-info-birthday').attr('value', document.getElementById("msg-borndate").innerText);
            $('#editor-info-intro').val(document.getElementById("msg-intro").innerText);
        }
    })
</script>
</body>
</html>